<template>
  <div class="rank">
    <SelfAdaption>
      <template v-slot:title>
        点赞榜
      </template>

      <template v-slot:selfBoxs>
        <SelfBox class="self-adaption-son" v-for="(data, index) of likeRankList" :key="data.id" :info="{
          insert: 'Top ' + (index+1),
          backgroundImage: data.cover_url || defaultConfig.ARTICLE_COVER,
          outsert: data.headline
        }" :to="{name: 'ArticleDisplay', params: {articleId: data.id}}">
        </SelfBox>
      </template>
    </SelfAdaption>

    <SelfAdaption>
      <template v-slot:title>
        收藏榜
      </template>

      <template v-slot:selfBoxs>
        <SelfBox class="self-adaption-son" v-for="(data, index) of collectionRankList" :key="data.id" :info="{
          insert: 'Top ' + (index+1),
          backgroundImage: data.cover_url || defaultConfig.ARTICLE_COVER,
          outsert: data.headline
        }" :to="{name: 'ArticleDisplay', params: {articleId: data.id}}">
        </SelfBox>
      </template>
    </SelfAdaption>

    <SelfAdaption>
      <template v-slot:title>
        浏览榜
      </template>

      <template v-slot:selfBoxs>
        <SelfBox class="self-adaption-son"  v-for="(data, index) of lookRankList" :key="data.id" :info="{
          insert: 'Top ' + (index+1),
          backgroundImage: data.cover_url || defaultConfig.ARTICLE_COVER,
          outsert: data.headline
        }" :to="{name: 'ArticleDisplay', params: {articleId: data.id}}">
        </SelfBox>
      </template>
    </SelfAdaption>    
  </div>
</template>

<script>
  import SelfBox from '__COMPONENTS__/self_adaption/SelfBox.vue'
  import SelfAdaption from '__COMPONENTS__/self_adaption/SelfAdaption.vue'
  import { getArticleRankList } from '__SERVICE__/article.js'
  import defaultConfig from '__CONFIG__/base-config.js'
  export default {
    name: 'Rank',
    data: () => ({
      collectionRankList: [],
      likeRankList: [],
      lookRankList: []
    }),
    components: {
      SelfAdaption,
      SelfBox
    },
    methods: {
      //获取收藏排行列表 start
      async getCollectionRanklist() {
        try {
          this.$Loading.show()
          const result = await getArticleRankList('collect_times')
          this.$Loading.hidden()
          const { data: { articleRankList } } = result
          this.collectionRankList = Object.freeze(articleRankList)
        }catch(e) {
          console.log(e)
        }
      },
      //获取收藏排行列表 end

      //获取点赞排行列表 start
      async getLikeRanklist() {
        try {
          this.$Loading.show()
          const result = await getArticleRankList('like_times')
          this.$Loading.hidden()
          const { data: { articleRankList } } = result
          this.likeRankList = Object.freeze(articleRankList)
        }catch(e) {
          console.log(e)
        }
      },
      //获取点赞排行列表 end

      //获取浏览排行列表 start
      async getLookRanklist() {
        try {
          this.$Loading.show()
          const result = await getArticleRankList('look_times')
          this.$Loading.hidden()
          const { data: { articleRankList } } = result
          this.lookRankList = Object.freeze(articleRankList)
        }catch(e) {
          console.log(e)
        }
      },
      //获取浏览排行列表 end
    },
    created() {
      //默认配置加载
      this.defaultConfig = defaultConfig
      this.getLikeRanklist()
      this.getCollectionRanklist()
      this.getLookRanklist()
    }
  }
</script>

<style lang="less">
  @import url('__CSS__/rank/rank.less');
</style>